<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      unique-opened
      router
    >
      <template v-for="item in items">
        <template v-if="item.subs">
          <el-sub-menu
            :index="item.index"
            :key="item.index"
            v-permiss="item.permiss"
          >
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-sub-menu
                v-if="subItem.subs"
                :index="subItem.index"
                :key="subItem.index"
                v-permiss="item.permiss"
              >
                <template #title>{{ subItem.title }}</template>
                <el-menu-item
                  v-for="(threeItem, i) in subItem.subs"
                  :key="i"
                  :index="threeItem.index"
                >
                  {{ threeItem.title }}
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item
                v-else
                :index="subItem.index"
                v-permiss="item.permiss"
              >
                {{ subItem.title }}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item
            :index="item.index"
            :key="item.index"
            v-permiss="item.permiss"
          >
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { computed, watch, ref } from "vue";
import { useSidebarStore } from "../store/sidebar";
import { useRoute } from "vue-router";
import { EmnuSubItem, EmnuItem } from "./index";

defineProps({
  items: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
/* interface EmnuSubItem{
    index: number;
    icon:string,
    title: string;
    permiss: string;
    subs:EmnuSubItem[]
}
interface EmnuItem {
    index: number;
    icon:string,
    title: string;
    permiss: string;
    subs:EmnuSubItem[]
} */

const route = useRoute();
const onRoutes = computed(() => {
  return route.path;
});
</script>

<style scoped lang="scss">
.sidebar {
  display: block;
  :deep(.el-menu--collapse) {
    width: calc(
      var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 3
    );
  }
  :deep(.el-menu-item) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.6;
    color: #333;
    height: 74px;
    .el-icon {
      margin: 0;
    }
    &.is-active {
      background-color: #c8e3ff;
    }
  }
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 84px;
}

.sidebar > ul {
  height: 100%;
}
</style>
